<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%	String ctxpath = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>支付平台PC端支付</title>
<link rel="stylesheet" href="http://127.0.0.1:6000/static/css/common.css">
<script src="http://127.0.0.1:6000/static/js/jquery-1.11.3.js"></script>
</head>
<body id = "body-content">
	<div class="g-p-body">	
		<div class="m-payPC">	
				<div class="m-p-head">	商城支付平台</div>
				<div class="m-p-tips">	请您及时付款，一边点单尽快处理！在线支付金额: <span class="s-p-main">￥${totalAmount }</span></div>
				<div class="m-p-body">	
						<table class="m-p-table">
							<thead>	
								<tr>	
									<th>订单编号</th>
									<th>订单描述</th>
									<th>备注</th>
								</tr>
							</thead>
							<tbody>	
									<tr>	
										<td>${orderNo }</td>
										<td>${body }</td>
										<td>${remark }</td>
									</tr>
							</tbody>
						</table>
						<div class="m-p-style">	
								<div class="t">	<span class="">	选择支付方式</span></div>
								<ul class="m-p-tab f-cb j-p-tab">
									<li class="z-act" pop-up="0">	<img src="http://127.0.0.1:6000/static/images/zfb_pay.png" alt="支付宝(电脑端)" onclick="setAliPCParam()"></li>
									<li class="z-act" pop-up="0">	<img src="http://127.0.0.1:6000/static/images/zfb_pay.png" alt="支付宝(手机端)" onclick="setAliWapParam()"></li>
									<li pop-up="1" tab-style="wx">	<img src="http://127.0.0.1:6000/static/images/wx_pay.png" alt="微信支付" onclick="setWxQRParam()"></li>
									<li pop-up="1" tab-style="zfb">	<img src="http://127.0.0.1:6000/static/images/ma_pay.png" alt="支付宝扫码" onclick="setAliQRParam()"></li>
								</ul>
						</div>
				</div>
				<div class="m-p-foot">
						<div class="m-p-pay f-cb">	
								<div class="totle">	
										支付金额：<span class="s-p-main">	${totalAmount }</span>
										<span class="btn btn-p-main f-ml60">	立即支付</span>
								</div>
						</div>
				</div>
		</div>		
		
	</div>
	<div class="m-cover j-ma j-back"></div>
	<div class="m-pop-box large j-ma">
		<div class="pop-head">
			<img class="" src="" alt="">
			<button type="button" class="close u-close j-back" >
				<span aria-hidden="true" class="u-xx">&times;</span>
			</button>
		</div>
		<div class="pop-body">
			<div class="title f-cb">
				<span class="c j-c">扫码支付</span> <span class="j-timeout t" seconds="60">请在(60s)内付款</span>
			</div>
			<div class="img">
				<img id="qrcodeimg" src="" alt="">
			</div>
		</div>
		<div class="pop-foot"></div>
	</div>
	<script>
		var orderNo = "${orderNo }";
		var body = "${body }";
		var remark = "${remark }";
		var totalAmount = "${totalAmount }";
		var loginName = "${loginName}";
		var subAccountId = "${subAccountId}";
		var subject = "${body }";
		var showURL = "${showURL }";
		
		
		function setAliPCParam() {
			var params = "?orderNo="+orderNo + "&body=" + body +"&subject="+subject+ "&loginName=" + loginName  +"&notifyUrl=wwwb";
			params += "&totalAmount=" + totalAmount + "&showURL=" + showURL;
			params += "&payType=2";
			params += "&payGate=3";
			$.ajax({
				  url: 'http://127.0.0.1:6000/sys/trade/customertrade' + params,
				  type:'get',
				  dataType: 'json',
				  success: function(data){
					  if (data.payResult!='1') {
						  return;
					  }
					  $("#body-content").html(data.returnCode);
				  }
			});
		}
		
		function setAliWapParam() {
			var params = "?orderNo="+orderNo + "&body=" + body +"&subject="+subject+ "&loginName=" + loginName + "&subAccountId="+subAccountId +"&notifyUrl=wwwb";
			params += "&totalAmount=" + totalAmount;
			params += "&payType=2";
			params += "&payGate=4";

			var jsonData = {
                orderNo: orderNo,
                body: body,
                loginName: loginName,
                totalAmount: totalAmount,
                subject: subject,
                payType: 2,
                payGate: 4
            };

			$.ajax({
				  <%--url: 'http://127.0.0.1:6000/sys/trade/customertrade' + params,--%>
				  url: 'http://127.0.0.1:6000/sys/trade/customertrade',
                  type : "POST",
				  dataType: "json",
				  contentType: "application/json",
				  data: JSON.stringify(jsonData),
				  success: function(data){
					  if (data.payResult!='1') {
						  return;
					  }
					  $("#body-content").html(data.returnCode);
				  }
			});
		}
		
		function setWxQRParam() {
			var params = "?orderNo="+orderNo + "&body=" + body +"&subject="+subject+ "&loginName=" + loginName + "&subAccountId="+subAccountId +"&notifyUrl=wwwb&spbillCreateIp=127.0.0.1";
			params += "&totalAmount=" + totalAmount;
			params += "&payType=1";
			params += "&payGate=2";
			$("#qrcodeimg").attr("src","http://127.0.0.1:6000/sys/trade/customertrade"+ params);
		}
		
		function setAliQRParam() {
			var params = "?orderNo="+orderNo + "&body=" + body +"&subject="+subject+ "&loginName=" + loginName + "&subAccountId="+subAccountId +"&notifyUrl=wwwb&detail=[]";
			params += "&totalAmount=" + totalAmount;
			params += "&payType=2";
			params += "&payGate=2";
			$("#qrcodeimg").attr("src","http://127.0.0.1:6000/sys/trade/customertrade"+ params);
		}
		
		$('.j-p-tab li').on('click',function(){
			$('.j-p-tab li').removeClass('z-act');
			$(this).addClass('z-act');
			if($(this).attr('pop-up')=='1'){
				$('.j-c').html(loadTitle($(this).attr('tab-style')));
				$('.j-ma').show();
				addMaImg();
			}
		});

		var si,st,no
		$('.j-back').on('click',function(){
			cancelAll();
		});
		//取消函数
		function cancelAll(){
			clearInterval(si);
			clearTimeout(st);
			clearTimeout(no);//模拟加载时间2秒
			$('.j-ma').hide();
		}
		//加载二维码函数
		function addMaImg(){
			//加载成功之前，显示提示文字
			beforeLoad();
			//加载成功后执行倒计时函数(假设加载时间2s)
			 no=setTimeout(function(){
				startTimeout();
			},2000)
			//倒计时结束后，重新加载!!!
		}
		//加载之前
		function beforeLoad(){
			showTips('正在加载，请稍后...')
		}
		//更改title
		function loadTitle(aim){
			if(aim=='zfb'){
				return '扫码支付宝支付'
			}else if(aim=='wx'){
				return '扫码微信支付'
			}else{
				return '扫码支付'
			}
		}
		//增加倒计时 60秒(由标签属性设置时间长度)
		function startTimeout(){
			var line=parseInt( $('.j-timeout').attr('seconds'));
			var i=line;
			var all=line*1000+100;
			showTips('请在('+i+'s)内付款')
			 si=setInterval(function(){
				i--;
				//str=
				//$('.j-timeout').html(str);
				showTips('请在('+i+'s)内付款')
			},1000);
			 st=setTimeout(function(){
				clearInterval(si);
				addMaImg();
				return true
			},all);
		}
		//显示提示函数
		function showTips(tips){
			$('.j-timeout').html(tips);
		}
	</script>
</body>
</html>